<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" class="home" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
 <title>FreeSystem</title>
</h:head>
	<head>
		<meta charset='utf-8'/>
		<style>
			* { margin:0; padding:0; font-family:sans-serif; }

			body { width:350px; }

			.head, li, h2 { margin-bottom:15px; }

			.head { 
				text-decoration:none; 
				font-size:20px; 
				display:block;
			}

			.content { 
				display:none;
			}
			#improved li {
				position:relative;
				overflow:hidden;
			}
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script>
			$(document).ready(function(){
				$('#original .head').click(function(e){
					e.preventDefault();
					$(this).closest('li').find('.content').slideToggle();
				});

				$('#improved .head').click(function(e){
					e.preventDefault();
					$(this).closest('li').find('.content').not(':animated').slideToggle();
				});
			});
		</script>
	</head>
	<body>
	<h:body>
		<h2>Original Version</h2>
		<ul id='original'>
			<li>
				<a href='#' class='head'>Heading 1</a>
				<div class='content'>
					<h:form>
					<h1>Ramo de Atividade</h1>
					    <p><h:outputText value="Nome:*" /></p>  
      					<h:inputText styleClass="inputtext" style="width:400px" />
      					<p><h:outputText value="Ativo:* "/><h:selectBooleanCheckbox /></p>
					</h:form>
				</div>
			</li>
			<li>
				<a href='#' class='head'>Heading 2</a>
				<div class='content'>
					<p>Vivamus id elementum risus. In sit amet mi nulla, ac sollicitudin odio. Phasellus laoreet leo vitae velit lobortis at condimentum odio placerat. Nam sapien eros, accumsan id porttitor a, commodo ut urna. Cras dignissim metus quis enim placerat lobortis.</p>

					<p>Nam arcu nulla, aliquam non molestie vitae, condimentum at lorem. Nam et consectetur augue. Phasellus varius ligula ac dui porta ullamcorper. Aliquam nunc sapien, hendrerit at adipiscing vel, ornare at justo. Nam vitae velit aliquet erat fringilla imperdiet. Phasellus diam urna, consectetur sit amet lacinia at, consequat non neque.</p>
				</div>
			</li>
			<li>
				<a href='#' class='head'>Heading 3</a>
				<div class='content'>
					<p>Phasellus scelerisque luctus ligula, a consequat orci posuere rutrum. Sed ipsum nisi, ullamcorper eget fermentum a, dignissim sed dolor. Mauris viverra pretium ante, eu mollis nisi volutpat quis. Nunc neque erat, pharetra in feugiat eget, faucibus id sem. Vivamus id elementum risus. In sit amet mi nulla, ac sollicitudin odio. Phasellus laoreet leo vitae velit lobortis at condimentum odio placerat. Nam sapien eros, accumsan id porttitor a, commodo ut urna. Cras dignissim metus quis enim placerat lobortis.</p>
				</div>
			</li>
		</ul>
		<h2>Improved Version</h2>
		<ul id='improved'>
			<li>
				<a href='#' class='head'>Heading 1</a>
				<div class='content'>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus varius urna, ac venenatis arcu convallis consequat. In augue est, posuere auctor facilisis varius, dictum ac risus. Donec nibh justo, aliquam sed tempus quis, lobortis sed orci. Aliquam condimentum, erat eget luctus commodo, mauris velit porta nulla, cursus placerat lectus tortor ac enim. Phasellus scelerisque luctus ligula, a consequat orci posuere rutrum. Sed ipsum nisi, ullamcorper eget fermentum a, dignissim sed dolor. Nam arcu nulla, aliquam non molestie vitae, condimentum at lorem. Nam et consectetur augue.</p>
				</div>
			</li>
			<li>
				<a href='#' class='head'>Heading 2</a>
				<div class='content'>
					<p>Vivamus id elementum risus. In sit amet mi nulla, ac sollicitudin odio. Phasellus laoreet leo vitae velit lobortis at condimentum odio placerat. Nam sapien eros, accumsan id porttitor a, commodo ut urna. Cras dignissim metus quis enim placerat lobortis.</p>

					<p>Nam arcu nulla, aliquam non molestie vitae, condimentum at lorem. Nam et consectetur augue. Phasellus varius ligula ac dui porta ullamcorper. Aliquam nunc sapien, hendrerit at adipiscing vel, ornare at justo. Nam vitae velit aliquet erat fringilla imperdiet. Phasellus diam urna, consectetur sit amet lacinia at, consequat non neque.</p>
				</div>
			</li>
			<li>
				<a href='#' class='head'>Heading 3</a>
				<div class='content'>
					<p>Phasellus scelerisque luctus ligula, a consequat orci posuere rutrum. Sed ipsum nisi, ullamcorper eget fermentum a, dignissim sed dolor. Mauris viverra pretium ante, eu mollis nisi volutpat quis. Nunc neque erat, pharetra in feugiat eget, faucibus id sem. Vivamus id elementum risus. In sit amet mi nulla, ac sollicitudin odio. Phasellus laoreet leo vitae velit lobortis at condimentum odio placerat. Nam sapien eros, accumsan id porttitor a, commodo ut urna. Cras dignissim metus quis enim placerat lobortis.</p>
				</div>
			</li>
		</ul>
	</h:body>	
	</body>
</html>